<template>
	<view :style="{ '--fss': app.theme.fss() }">
		<view class="shade flex" :class="loadingShow ? 'show' : ''" @touchmove.stop.prevent>
			<view class="small_load" :class="loadingShow ? 'show' : ''">
				<view class="weui-loading"></view>
				<text class="weui-loadmore ell">{{ info ? info.text : "加载中.." }}</text>
				<text class="weui-close iconfont icon-yuyinguanbi" v-if="info && info.close" @tap="close"></text>
			</view>
		</view>
		<view 
			class="common_toast flex" 
			:class="toastShow ? 'show' : ''"
			:style="{ 
				top: toastShow ? `calc(${systemInfo.statusBarHeight}px + ${info && info.top ? info.top : '100rpx'})` : `-100%`,
			}"
		>
			<image :src="`/static/img/toast_${info ? info.type : 'success'}.png`" mode="widthFix"></image>
			<text>{{ info ? info.text : 'toast提示' }}</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, inject, defineExpose } from "vue";
	const app = inject('app');

	/* 变量区域 */
	// 系统信息
	const systemInfo = ref(app.config.systemInfo);
	
	// loading是否显示
	const loadingShow = ref(false);
	
	// toast是否显示
	const toastShow = ref(false);
	
	// 基本信息
	const info = ref(null);
	
	// 时间事件
	const timer = ref(null);

	
	/* 方法区域 */
	// 打开弹窗
	function open(e){
		close();
		info.value = e;
		
		if (e.type == "loading") {
			loadingShow.value = true;
		} else {
			timer.value = setTimeout(() => {
				toastShow.value = false;
			}, e.time || 2500);
			toastShow.value = true;
		}
	}
	
	// 关闭 弹窗
	function close() {
		clearTimeout(timer.value);
		loadingShow.value = false;
		toastShow.value = false;
	}
	
	
	// 将方法抛出给父级组件使用
	defineExpose({ open, close });
</script>

<style scoped lang="scss">
	.small_load {
		display: inline-flex;
		background: #FFF;
		border-radius: 8rpx;
		visibility: hidden;
		transition: 0.2s all;
		transform: scale(0);
		flex-direction: row;
		align-items: center;
		line-height: 68rpx;
		padding: 0 24rpx 0 24rpx;
		&.show {
			visibility: visible;
			transform: scale(1);
		}
		.weui-loading {
			width: 35rpx;
			height: 35rpx;
			border: 4rpx solid #e5e9ff;
			border-bottom-color: #353736;
			border-radius: 50%;
			animation: rotation 1s linear infinite;
		}
		.weui-loadmore {
			color: #888;
			margin-left: 16rpx;
			font-size: calc(24rpx * var(--fss));
		}
		.weui-close {
			color: #999;
			margin-left: 16rpx;
			font-size: calc(24rpx * var(--fss));
		}
		@keyframes rotation {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
	}
	.common_toast {
		flex-direction: row;
		align-items: center;
		position: fixed;
		left: 50%;
		transform: translate(-50%, 0);
		background: #FFF;
		padding: 10rpx 20rpx 10rpx 10rpx;
		border-radius: 80rpx;
		transition: 0.4s all;
		visibility: hidden;
		z-index: 10000;
		&.show {
			visibility: visible;
		}
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 12rpx;
			flex-shrink: 0;
		}
		text {
			font-size: calc(24rpx * var(--fss));
			color: #666;
		}
	}
</style>
